<template>
  <div class="baiduMap" id="baiduMap">

  </div>
</template>

<script setup lang="ts">
import { onMounted } from "@vue/runtime-core";

onMounted(() => {
  let map = new BMapGL.Map("baiduMap");          // 创建地图实例 
  let point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
  map.centerAndZoom(point, 15);      
  map.enableScrollWheelZoom(true);  
  let scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
  map.addControl(scaleCtrl);
  let zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
  map.addControl(zoomCtrl);
  let cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
  map.addControl(cityCtrl);
  navigator.geolocation.getCurrentPosition(
    position => {
      point = new BMapGL.Point(position.coords.longitude, position.coords.latitude); 
      let marker = new BMapGL.Marker(point);        // 创建标注   
      map.addOverlay(marker);   
      map.centerAndZoom(point, 15);  
    }
  )
})
</script>
